<template>
    <!-- 显示el-sub-menu, 其中的index代表是否选中的变量 -->
    <el-sub-menu v-if="item.children" :index="item.url">
        <template #title>
            <el-icon>
                <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
        </template>
        <my-menu v-for="child in item.children" :key="child.url" :item="child"></my-menu>
    </el-sub-menu>

    
    <!--显示el-menu-item -->
    <el-menu-item v-else :index="item.url"   v-show="!(item.name=='订单详情')">
        <el-icon>
            <component :is="item.icon"></component>
        </el-icon>
        <span>{{ item.name }}</span>
    </el-menu-item>
</template>

<script lang="ts">
import {defineComponent,PropType} from "vue"
import {MenuItem as MenuItemType} from "@/types/user"       //定义的菜单数据结构的类型

export default defineComponent({
    name:"MyMenu",
       props:{     //定义props,是从memu.vue传入过来的props参数
        item:{
            type:Object as PropType<MenuItemType>,
            required:true    
        }
    },
})
</script>


